<template>
  <el-dialog
    v-model="dialogVisible"
    title="客户详情"
    width="1200px"
    @close="handleClose"
  >
    <div v-if="customerDetail" class="customer-detail" v-loading="loading">
      <!-- 基本信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><User /></el-icon>
            基本信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>客户ID：</label>
              <span>{{ customerDetail.id }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>客户名称：</label>
              <span>{{ customerDetail.customerName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>客户代码：</label>
              <span>{{ customerDetail.customerCode || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>联系人：</label>
              <span>{{ customerDetail.contactPerson }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>联系电话：</label>
              <span>{{ customerDetail.phone }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>邮箱：</label>
              <span>{{ customerDetail.email || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>行业：</label>
              <span>{{ customerDetail.industry || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>审批状态：</label>
              <el-tag :type="getStatusType(customerDetail.approvalStatus)">
                {{ getStatusText(customerDetail.approvalStatus) }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>当前步骤：</label>
              <span>{{ customerDetail.currentStep || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <label>备注：</label>
              <span>{{ customerDetail.remarks || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 收货信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><Location /></el-icon>
            收货信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>收货人姓名：</label>
              <span>{{ customerDetail.deliveryName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>收货人电话：</label>
              <span>{{ customerDetail.deliveryPhone || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <label>省份：</label>
              <span>{{ customerDetail.province || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>城市：</label>
              <span>{{ customerDetail.city || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <label>区县：</label>
              <span>{{ customerDetail.district || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <label>收货地址：</label>
              <span>{{ customerDetail.deliveryAddress || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 开票信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><Document /></el-icon>
            开票信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>发票抬头：</label>
              <span>{{ customerDetail.invoiceTitle || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>税号：</label>
              <span>{{ customerDetail.taxNumber || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>开户银行：</label>
              <span>{{ customerDetail.bankName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>银行账号：</label>
              <span>{{ customerDetail.bankAccount || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 订货单位信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><OfficeBuilding /></el-icon>
            订货单位信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>订货单位名称：</label>
              <span>{{ customerDetail.orderUnitName || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>地址：</label>
              <span>{{ customerDetail.address || '-' }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>联系人：</label>
              <span>{{ customerDetail.orderContactPerson || '-' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>电话：</label>
              <span>{{ customerDetail.orderPhone || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>


      <!-- 时间信息 -->
      <el-card class="detail-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><Clock /></el-icon>
            时间信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <label>创建时间：</label>
              <span>{{ formatDate(customerDetail.createdAt) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <label>更新时间：</label>
              <span>{{ formatDate(customerDetail.updatedAt) }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button 
          v-if="customerDetail && customerDetail.approvalStatus === 'PENDING' && !customerDetail.processInstanceId"
          type="primary" 
          @click="editCustomer"
        >
          编辑
        </el-button>
      </div>
    </template>
    
  </el-dialog>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Location, Document, OfficeBuilding, Clock } from '@element-plus/icons-vue'
import { getCustomerDetailById } from '../../api/customer.js'

export default {
  name: 'CustomerDetail',
  components: {
    User, Location, Document, OfficeBuilding, Clock
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    customer: {
      type: Object,
      default: null
    }
  },
  emits: ['update:visible', 'success'],
  setup(props, { emit }) {
    const dialogVisible = computed(() => props.visible)
    const customerDetail = ref(null)
    const loading = ref(false)
    
    // 监听客户ID变化，加载详情数据
    watch(() => props.customer?.id, async (customerId) => {
      if (customerId && props.visible) {
        await loadCustomerDetail(customerId)
      }
    }, { immediate: true })
    
    // 监听对话框显示状态
    watch(() => props.visible, async (visible) => {
      if (visible && props.customer?.id) {
        await loadCustomerDetail(props.customer.id)
      }
    })
    
    // 加载客户详情
    const loadCustomerDetail = async (customerId) => {
      try {
        loading.value = true
        const response = await getCustomerDetailById(customerId)
        customerDetail.value = response
      } catch (error) {
        console.error('加载客户详情失败:', error)
        ElMessage.error('加载客户详情失败')
        // 如果详情加载失败，使用传入的客户基本信息
        customerDetail.value = props.customer
      } finally {
        loading.value = false
      }
    }
    
    // 关闭对话框
    const handleClose = () => {
      emit('update:visible', false)
    }
    
    // 编辑客户
    const editCustomer = () => {
      emit('success')
      handleClose()
    }
    
    
    // 获取状态类型
    const getStatusType = (status) => {
      const statusMap = {
        'PENDING': 'warning',
        'APPROVING': 'primary',
        'APPROVED': 'success',
        'REJECTED': 'danger',
        'CANCELLED': 'info'
      }
      return statusMap[status] || 'info'
    }
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'PENDING': '待审批',
        'APPROVING': '审批中',
        'APPROVED': '已通过',
        'REJECTED': '已拒绝',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    }
    
    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleString()
    }
    
    
    return {
      dialogVisible,
      customerDetail,
      loading,
      handleClose,
      editCustomer,
      getStatusType,
      getStatusText,
      formatDate
    }
  }
}
</script>

<style scoped>
.customer-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.detail-item label {
  font-weight: 600;
  color: #606266;
  min-width: 120px;
  margin-right: 10px;
}

.detail-item span {
  color: #303133;
  flex: 1;
  word-break: break-all;
}

.reject-reason {
  color: #F56C6C;
  font-style: italic;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>
